import React from 'react';
import { Routes, Route } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import {
  DashboardOutlined,
  UploadOutlined,
  HistoryOutlined,
  UserOutlined,
  SettingOutlined
} from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import DashboardHome from './dashboard/Home';
import Upload from './dashboard/Upload';
import History from './dashboard/History';
import Profile from './dashboard/Profile';
import Settings from './dashboard/Settings';
import './Dashboard.css';

const { Sider, Content } = Layout;

const Dashboard = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const menuItems = [
    {
      key: '/dashboard',
      icon: <DashboardOutlined />,
      label: '控制台',
      onClick: () => navigate('/dashboard')
    },
    {
      key: '/dashboard/upload',
      icon: <UploadOutlined />,
      label: '文件上传',
      onClick: () => navigate('/dashboard/upload')
    },
    {
      key: '/dashboard/history',
      icon: <HistoryOutlined />,
      label: '处理历史',
      onClick: () => navigate('/dashboard/history')
    },
    {
      key: '/dashboard/profile',
      icon: <UserOutlined />,
      label: '个人资料',
      onClick: () => navigate('/dashboard/profile')
    },
    {
      key: '/dashboard/settings',
      icon: <SettingOutlined />,
      label: '设置',
      onClick: () => navigate('/dashboard/settings')
    }
  ];

  return (
    <Layout className="dashboard-layout">
      <Sider width={250} className="dashboard-sider">
        <div className="dashboard-logo">
          <h2>控制台</h2>
        </div>
        <Menu
          mode="inline"
          selectedKeys={[location.pathname]}
          items={menuItems}
          className="dashboard-menu"
        />
      </Sider>
      <Layout className="dashboard-content-layout">
        <Content className="dashboard-content">
          <Routes>
            <Route path="/" element={<DashboardHome />} />
            <Route path="/upload" element={<Upload />} />
            <Route path="/history" element={<History />} />
            <Route path="/profile" element={<Profile />} />
            <Route path="/settings" element={<Settings />} />
          </Routes>
        </Content>
      </Layout>
    </Layout>
  );
};

export default Dashboard; 